<template>
  <div class="columns " id="de">
    <!--文章详情-->
    <div class="column is-three-quarters">
      <!--主题-->
      <el-card
        class="box-card"
        shadow="never"
      >
        <div
          slot="header"
          class="has-text-centered"
        >
          <p class="is-size-5 has-text-weight-bold">{{ post.title }}</p>
          <div class="has-text-grey is-size-7 mt-3">
            <span>{{ post.createTime }}</span>
            <el-divider direction="vertical" />
            <span>发布者：{{ postUser.username }}</span>
            <el-divider direction="vertical" />
            <span>查看：{{ post.view }}</span>
          </div>
        </div>

        <!--Markdown-->
        <div id="preview" />

        <!--标签-->
        <nav class="level has-text-grey is-size-7 mt-6">
          <div class="level-left">
            <p class="level-item">
              <span>标签:</span>
              <b-taglist>
                  <b-tag v-for="(tag,index) in tags" :key="index" type="is-info is-light mr-1">
                    {{ tag.name+'  热度:'+tag.topicCount }}
                  </b-tag>
              </b-taglist>
            </p>
          </div>
          <div
            v-if="token && user.id === postUser.id"
            class="level-right"
          >
            <a class="level-item">
              <span
                class="button"
                @click="remove"
              >删除</span>
            </a>
          </div>
        </nav>
      </el-card> 
      <comment :postId="post.id"></comment>
    </div>
    <div>
      <author :user="postUser"></author>
            <!--推荐-->
      <recomment ></recomment>
      </div>
  </div>
  
</template>

<script>
import { getPost,removePost } from "../../api/post"
import { mapGetters } from 'vuex'
import Author from "./Author.vue"
import Recommend from "./Recomment"
import Comment from "./comment/Comment.vue"
import Vditor from 'vditor'
import 'vditor/dist/index.css'
import Recomment from './Recomment.vue'

export default {
  name: 'PostDetail',
  components: { Author, Recommend, Comment },
  computed: {
    ...mapGetters([
      'token','user'
    ])
  },
  data() {
    return {
      flag: false,
      post: {
        title:'',
        view:0,
        content: '',
        id: this.$route.params.id
      },
      tags: [],
      postUser: {},
    }
  },
  components:{ Author,Recommend, Comment, Recomment },
  mounted() {
    this.fetchPost()
  },
  methods: {
    renderMarkdown(md) {
      Vditor.preview(document.getElementById('preview'), md, {
        hljs: { style: 'github' }
      })
    },
    // 初始化数据
    fetchPost() {
        console.log()
        getPost(this.post.id).then(res=>{
            const result = res.data;
            console.log(result.data);
            if(result.code == 0){
                this.post = result.data;
                this.postUser = result.data.user;
                this.tags = result.data.tagList;
                this.renderMarkdown(this.post.content);
                this.flag = true;
            }else{
                this.$message({
                    message: result.msg,
                    type: "error"
                })
            }
        })
    },
    //删除
    remove() {
        removePost(this.post.id).then(res=>{
          const result = res.data;
          if(result.code == 0){
            this.$message({
              message: result.msg,
              type: "success",
            });
            this.$router.push("/");
          }else{
            this.$message({
              message: result.msg,
              type: "error",
            });
          }
        })
    }   
  },
    watch:{
    '$route'(to,from){
      //监听路由发生的改变重新渲染同一组件
      // console.log(to.params.id);
      this.post.id = to.params.id;
      this.fetchPost();
    }
  }
}
</script>

<style>
#preview {
  min-height: 300px;
}
#de{
  margin: 0 auto;
}
</style>